<template>
  <div class="order-item">
    <el-image class="image" :src="order.image" fit="contain" />
    <div class="main">
      <div class="name">商品名称：{{ order.name }}</div>
      <div class="description">商品描述：{{ order.description }}</div>
      <div class="identity">营业单位：{{ order.identityName }}</div>
    </div>
    <div class="more-info" style="margin-left: 50px">
      <div class="address">送货地址：{{ order.address }}</div>
      <div class="pay-time">支付日期：{{ order.payTime }}</div>
      <div class="order-id">订单号：{{ order.id }}</div>
    </div>
    <div class="consume">
      <div class="total">
        <div class="price">￥{{ decimalPointSave(order.totalPrice) }}</div>
        <div class="integral">∫{{ decimalPointSave(order.totalIntegral) }}</div>
      </div>
      <div class="number">X {{ order.number }}</div>
    </div>
  </div>
</template>

<script setup>
import { decimalPointSave } from '@/utils/strutils'

const props = defineProps({
  obj: Object,
})

const order = props.obj
</script>

<style scoped less="scss">
.order-item {
  position: relative;

  display: flex;
  align-items: center;
  gap: 10px;

  width: 90%;
  height: 84px;
  padding: 5px;
  box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.5s;

  .image {
    max-height: 76px;
    height: 100px;
    border-radius: 4px;
  }

  .main,
  .more-info {
    color: grey;
    font-size: 14px;
  }

  .consume {
    position: absolute;
    right: 3%;

    display: flex;
    flex-direction: column;
    align-items: end;

    .total {
      display: flex;
      gap: 10px;

      font-size: 18px;
      color: #444;
    }

    .number {
      color: rgb(255, 106, 0);
    }
  }
}

.order-item:hover {
  box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2);
}
</style>
